<template>
  <div>
    <!-- 头部 -->
    <el-header>
      <div class="between">
        <div class="left"><h2>简易内容分享平台</h2></div>
        <div class="right">欢迎您:{{ name }}</div>
      </div>
    </el-header>
    <!-- 类型标签 -->
    <div>
      <el-tag v-for="tag in tags" :key="tag.id" @click="change(tag)" :type="tag.id == cur.id?'success':''">{{
        tag.name
      }}</el-tag>
    </div>
    <!-- 工具栏 -->
    <div class="tool">
      <div class="between">
        <div class="left">总计:{{ items.length }}个组件</div>
        <div class="right flex">
          查看所有:
          <el-switch v-model="checked">{{
            checked ? "已开启" : "已关闭"
          }}</el-switch>
          <div class="e-upload" @click="toUp()">
            创建一个:
            <i class="el-icon-upload"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 组件滚动区域 -->
    <div class="warp">
      <el-card @click="choose(item)"
        v-for="item in items"
        :key="item.id"
        :body-style="{ padding: '10px' }"
      >
        <div class="title">{{ item.path }}</div>
        <div class="content">{{ item.info }}</div>
      </el-card>
    </div>
  </div>
</template>
<script>
var res;
export default {
  data() {
    return {
      tags: [],
      cur: {},
      items: [],
      checked: true,
      name:'',
    };
  },
  async created() {
    res = await this.http.post("/api/types", {});
    this.tags = res.data;
    if(this.tags.length){
       this.cur = this.tags[0]
       this.loadData()
    }
  },
  mounted(){
    this.name = localStorage.name
  },
  methods: {
    async loadData(){
       res = await this.http.post("/api/components", { tid:this.cur.id});
       this.items = res.data;
    },
    async change(e) {
      console.log(e);
      this.cur = e
      this.loadData()
    },
    toUp(){
      if(!this.cur.id) return  this.$message.error("没有选择类型")
      localStorage.setItem('type',this.cur.id)
      this.$router.push('/upload');
    }
  },
};
</script>

<style>
.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex {
  display: flex;
  align-items: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.tool {
  margin: 20px;
}
.el-tag,.e-upload,
.el-icon-upload {
  cursor: pointer;
}
.el-tag {
  margin: 5px;
}
.el-switch {
  margin: 0 10px;
}
.el-card {
  width: 300px;
  margin: 5px;
}
.warp {
  display: flex;
  flex-wrap: wrap;
}

</style>
